<html>
  <head>
    <title>My webcams</title>
    <script language="javascript" type="text/javascript" src="/functions.js"></script>
    <script language="javascript">

      function send_command(cmd) {
        document.getElementById('hints').firstChild.nodeValue = "Send command: " + cmd;
        AJAX_get('/?action=command&command='+ cmd)
      }

      function AJAX_response(text) {
        document.getElementById('hints').firstChild.nodeValue = "Got response: " + text;
      }

    </script>
  </head>
  <body>
    <center>
      <form name="command_panel" action="" onsubmit="return false;">
        <table width="100%"  border="0" align="center" cellpadding="10" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td width="640">
            <p align="center">
              <input name="tilt_up" type="button" onClick="send_command('tilt_minus')" value="^">
              &nbsp;
              <input name="tilt_up_full" type="button" onClick="send_command('tilt_set&value=-'+90)" value="^^">
              &nbsp;
              <input name="tilt_up_value" type="input" id="tilt_up_value" value="0" style="width: 40px">
              <input name="tilt_up_to" type="button" onClick="send_command('tilt_set&value=-'+this.form.tilt_up_value.value)" value="^ to">
            </p>
          </td>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td height="40%">&nbsp;</td>
          <td width="640" rowspan="3">
            <applet code="com.charliemouse.cambozola.Viewer" archive="/cambozola.jar" width="640" height="480">
              <param name="url" value="/?action=stream"/>
            </applet>
          </td>
          <td colspan="3" valign="top">
            <div align="left">
              <table  border="0" cellspacing="4" cellpadding="0">
                <tr>
                  <td>
                    <input name="brightness_minus" type="button" onClick="send_command('brightness_minus')" value="-">
                  </td>
                  <td>
                    <div align="center">Brightness</div>
                  </td>
                  <td>
                    <input name="brightness_plus" type="button" onClick="send_command('brightness_plus')" value="+">
                  </td>
                </tr>
                <tr>
                  <td>
                    <input name="contrast_minus" type="button" onClick="send_command('contrast_minus')" value="-">
                  </td>
                  <td>
                    <div align="center">Contrast</div>
                  </td>
                  <td>
                    <input name="contrast_plus" type="button" onClick="send_command('contrast_plus')" value="+">
                  </td>
                </tr>
                <tr>
                  <td>
                    <input name="saturation_minus" type="button" onClick="send_command('saturation_minus')" value="-">
                  </td>
                  <td>
                    <div align="center">Saturation</div>
                  </td>
                  <td>
                    <input name="saturation_plus" type="button" onClick="send_command('saturation_plus')" value="+">
                  </td>
                </tr>
                <tr>
                  <td>
                    <input name="gain_minus" type="button" onClick="send_command('gain_minus')" value="-">
                  </td>
                  <td>
                    <div align="center">Gain</div>
                  </td>
                  <td>
                    <input name="gain_plus" type="button" onClick="send_command('gain_plus')" value="+">
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                    <div align="center">
                      <input name="reset" type="button" onClick="send_command('reset')" value="Reset Settings">
                    </div>
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                    <div align="center">
                      <input name="reset_pan_tilt" type="button" onClick="send_command('reset_pan_tilt')" value="Reset pan&tilt">
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
        <tr>
          <td valign="middle">
            <p align="right">
              <input name="pan_left_full" type="button" onClick="send_command('pan_set&value='+90)" value="<<">
              &nbsp;
              <input name="pan_left" type="button" onClick="send_command('pan_plus')" value="<">
              <input name="pan_left_to" type="button" onClick="send_command('pan_set&value='+this.form.pan_left_value.value)" value="< to">
              <input name="pan_left_value" type="input" value="0" style="width: 40px">
            </p>
          </td>
          <td colspan="3" valign="middle">
            <p align="left">
              <input name="pan_right" type="button" onClick="send_command('pan_minus')" value=">">
              &nbsp;
              <input name="pan_right_full" type="button" onClick="send_command('pan_set&value=-'+90)" value=">>">
              <input name="pan_right_value" type="input" value="0" style="width: 40px">
              <input name="pan_right_to" type="button" onClick="send_command('pan_set&value=-'+this.form.pan_right_value.value)" value="to >">
            </p>
          </td>
        </tr>
        <tr>
          <td height="40%">&nbsp;</td>
          <td colspan="3" valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td width="640">
            <div align="center">
              <input name="tilt_down" type="button" onClick="send_command('tilt_plus')" value="v">
              &nbsp;
              <input name="tilt_down_full" type="button" onClick="send_command('tilt_set&value='+90)" value="vv">
              &nbsp;
              <input name="tilt_down_value" type="input" value="0" style="width: 40px">
              <input name="tilt_down_to" type="button" onClick="send_command('tilt_set&value='+this.form.tilt_down_value.value)" value="to v">
            </div>
          </td>
          <td colspan="3">&nbsp;</td>
        </tr>
        </table>
    </form>

    <div id="hints">Status</div>
    </center>
  </body>
</html>
